{% extends 'main/base.html' %}
{% block content %}
<div class="columns has-background-black-ter is-centered has-text-white-bis">
	<!-- на самом деле можно было обойтись и hero, но я обратился к inline-css -->
	<div class="column is-half">    	
    	<form action="" method="post">				
        	{% csrf_token %}
					{% if todos %}
					<div class="field has-text-centered"><label for="index" class="label has-text-white-bis">Полный список дел</label></div>
						<table class="table">
							<thead>
								<tr>
									<th>Выбрать</th>
									<th>Наименование</th>
									<th>Описание</th>
									<th>Признак выполенения</th>
								</tr>
							</thead>
							<tbody>				
            	{% for todo in todos %}
							<tr>
								<td>	<label class="checkbox">
									<input type="checkbox" class=" checkbox" name="checkedbox" value="{{ todo.id }}"></td>
								<td>{{ todo.title }}</td>
								<td>{{ todo.description }}</td>
								<td>{% if todo.is_done %}<button class="button is-link" name="Done" formnovalidate="" type="submit" disabled>
									<span class="icon is-small">
											<i class="fa fa-trash-o"></i>
									</span>
									<span>
											Выполнено
									</span>{% else %}<button class="button is-link" name="Done" value={{ todo.id }} formnovalidate="" type="submit" disabled>
									<span class="icon is-small">
											<i class="fa fa-trash-o"></i>
									</span>
									<span>
										Не выполнено
									</span>
							</button>{% endif %}</td>
							</tr>
							</tbody>							
							{% endfor %}
						</table>
							<div class="column">
											<button class="button is-link" name="Delete" formnovalidate="" type="submit">
													<span class="icon is-small">
															<i class="fa fa-trash-o"></i>
													</span>
													<span>Удалить дело</span>
											</button>
									</div>
							</div>
							{% else  %}<h1 class="is-size-3 has-text-centered"> Список дел пуст!</h1>{% endif %}	
    	</form>
	</div>
</div>
{% endblock %}